<template>
    <transition name="slide-up">
        <div class="setting-wrapper" v-show="menuVisible && settingVisible == 1">
            <div class="setting-theme">
                <!-- themeList是从mixin中获取的 -->
                <div class="setting-theme-item" v-for="(item,index) in themeList" :key="index" @click="setTheme(index)">
                    <div class="preview" :style="{background: item.style.body.background}" :class="{'selected': item.name === defaultTheme}"></div>
                    <div class="text" :class="{'selected': item.name === defaultTheme}">{{ item.alias }}</div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin';
import { saveTheme } from '../../utils/localStorage';
export default {
    mixins: [ebookMixin],

    data() {
        return {
            
        };
    },

    methods: {
        setTheme(index) { //切换主题
            const theme = this.themeList[index]
            //保存当前主题为默认主题。以及保存当前主题到本地，这样刷新页面后也可以正常给当前主题高亮
            this.setDefaultTheme(theme.name).then(() => { //保存默认主题
                //使用主题的前提是已经把主题都注册好了，这里我们已经先在EbookReader中初始化主题时注册了
                this.currentBook.rendition.themes.select(this.defaultTheme) //设置当前背景为默认主题
                this.initGlobalStyle() //初始化全局样式，该函数先移除全部主题样式，再添加默认主题样式
                                    //,这里是为了给标题和菜单栏添加背景颜色样式，电子书背景样式改变由上面select决定
            })
            saveTheme(this.fileName,theme.name)//保存主题到本地
        }
    },
};
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global.scss';
.setting-wrapper { 
    position: absolute;
    bottom: px2rem(48);
    left: 0;
    z-index: 101;
    width: 100%;
    height: px2rem(90);
    background: white;
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,.15);
    .setting-theme { 
        height: 100%;
        display: flex;
        .setting-theme-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: px2rem(5);
            box-sizing: border-box; 
            .preview { 
                flex: 1;
                border: px2rem(1) solid #ccc;
                box-sizing: border-box;
                &.selected {
                    box-shadow: 0 px2rem(4) px2rem(6) 0 rgba(0,0,0,.1)
                }
            }
            .text { 
                flex: 0 0 px2rem(20);
                font-size: px2rem(14);
                color: #ccc;      
                @include center;   
                &.selected {
                    color: #333;
                }  
            }
        }
    }
}
</style>